import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { menuDefaultProps } from './defaultProps';
import type { MenuOptions } from './type';
import numberToWord from '../_util/numberToWord';
import MenuItem from './MenuItem';
import { MenuContextProvider } from './MenuContext';

export interface MenuProps extends MenuOptions, HTMLAttributes<HTMLDivElement> {}

interface MenuInterface extends FC<MenuProps> {
  Item: typeof MenuItem;
}

const Menu: MenuInterface = (props) => {
  const { className, widths, defaultId, text, attached, children, forwardedRef, ...menuProps } = props;

  return createElement(
    MenuContextProvider,
    { initialValue: { activeItem: defaultId } },
    createElement(
      'div',
      {
        ref: forwardedRef,
        className: classNames(
          'ui',
          numberToWord(widths),
          { item: widths, text },
          attached,
          { attached },
          'menu',
          className,
        ),
        ...menuProps,
      },
      children,
    ),
  );
};

Menu.displayName = 'Menu';
Menu.defaultProps = menuDefaultProps;

Menu.Item = MenuItem;

export default Menu;
